import React from "react";
import { Link, useLocation } from "react-router-dom";
import { Home, Box, ShoppingCart, Upload, User } from "lucide-react";
import styled from "styled-components";
import { useSelector } from 'react-redux';

const Layout = ({ children }: { children: React.ReactNode }) => {
  const location = useLocation();
  const theme = useSelector((state: any) => state.theme);

  const navItems = [
    {
      path: "/home",
      icon: Home,
      label: "首页",
    },
    {
      path: "/home/boxes",
      icon: Box,
      label: "盒子",
    },
    {
      path: "/home/manage",
      icon: Upload,
      label: "管理",
    },
    {
      path: "/home/orders",
      icon: ShoppingCart,
      label: "订单",
    },
    {
      path: "/home/user",
      icon: User,
      label: "用户",
    },
  ];

  return (
    <LayoutContainer>
      {/* 绿色主题的叶子装饰 */}
      {theme === 'green' && (
        <>
          <div className="leaf-decoration" />
          <div className="leaf-decoration" />
          <div className="leaf-decoration" />
        </>
      )}
      
      <TopNav>
        <div className="h-full px-4 flex items-center justify-between">
          <span className="text-xl font-bold text-indigo-600">零食盒</span>
        </div>
      </TopNav>

      <MainContent>
        {children}
      </MainContent>

      <BottomNav>
        <div className="h-full px-4 flex items-center justify-around">
          {navItems.map((item) => (
            <StyledLink
              key={item.path}
              to={item.path}
              $active={location.pathname === item.path}
            >
              <item.icon className="h-6 w-6" />
              <span>{item.label}</span>
            </StyledLink>
          ))}
        </div>
      </BottomNav>
    </LayoutContainer>
  );
};

export default Layout;

const LayoutContainer = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--adm-color-background);
`;

const TopNav = styled.nav`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: white;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
`;

const MainContent = styled.main`
  flex: 1;
  overflow-y: auto;
  padding: 76px 20px 80px;
  -webkit-overflow-scrolling: touch;
`;

const BottomNav = styled.nav`
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: white;
  border-top: 1px solid #f0f0f0;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
`;

const StyledLink = styled(Link)<{ $active?: boolean }>`
  display: flex;
  flex-direction: column;
  align-items: center;
  color: ${props => props.$active ? 'var(--adm-color-primary)' : 'var(--adm-color-text-secondary)'};
  transition: color 0.3s ease;
  
  svg {
    margin-bottom: 4px;
    color: ${props => props.$active ? 'var(--adm-color-primary)' : 'var(--adm-color-text-secondary)'};
  }
  
  span {
    font-size: 12px;
  }
`;
